<div class="layout_content">

    <?php echo $header; ?>

    <div class="shaixuan">
        <div class="four1 four" rel="1" onclick="sortToptab('composite',this)">综合</div>
        <div class="four2 four Cgray" rel="1" onclick="sortToptab('sales',this)">销量
            <img src="<?php echo WEBIMG; ?>/paixu_moren.png" class="img-sub oimg" id="test1"/>
        </div>
        <div class="four3 four Cgray" rel="1" onclick="sortToptab('price',this)">价格
            <img src="<?php echo WEBIMG; ?>/paixu_moren.png" class="img-sub oimg"/>
        </div>
        <div class="four4 four Cgray" onclick="ShowDiv2('guige','fade')">筛选
            <img src="<?php echo WEBIMG; ?>/shaixuan_moren.png" class="img-sub"/>
        </div>
    </div>

    <div class="sort-left graybg">
        <?php if (isset($ApiData['cateMenu'])) { ?>
            <?php foreach ($ApiData['cateMenu'] as $key => $val) { ?>
                <div>
                    <div class="cate_item" rel="<?php echo $val['id']; ?>"><?php echo $val['name']; ?></div>
                    <?php if (isset($val['child'])) { ?>
                        <div class="sort-left-erji Cgray select-font disn white2bg" style="padding: 0;">
                            <?php foreach ($val['child'] as $k => $v) { ?>
                                <div class="padding-adjust5 div-center border-short border3"
                                     rel="<?php echo $v['id']; ?>"><?php echo $v['name']; ?></div>
                            <?php } ?>
                        </div>
                    <?php } ?>
                </div>
            <?php } ?>
        <?php } ?>
    </div>

    <div class="product_list">
        <?php foreach ($ApiData['productList'] as $kk => $vv) { ?>
            <div sort-price="<?php echo $vv['sort_price']; ?>" sort-sales="<?php echo $vv['sales_valume']; ?>"
                 sort-sort="<?php echo $vv['sort']; ?>"
                 class="flt border2 product_<?php echo $vv['brand_id']; ?> product_<?php echo $vv['parent_brand_id']; ?>"
                 style="width: 77%;padding: 6px 0;">
                <div class="page-product2-img text-center" style="width: 30%;">
                    <a href="<?php echo WEBROOT . '/product/detail/id/' . $vv['id'] . '.html' ?>">
                        <img src="<?php echo $vv['icon_url']; ?>">
                    </a>
                </div>
                <div class="page-product-right" style="line-height: 22px;">
                    <div class="page-product1-font1">
                        <a href="<?php echo WEBROOT . '/product/detail/id/' . $vv['id'] . '.html' ?>">
                            <?php echo $vv['name']; ?>
                        </a>
                    </div>
                    <div class="fontsize fontC"><?php echo $vv['mass_packing']; ?></div>
                    <div class="price">￥<?php echo $vv['channel_price']; ?></div>
                </div>
                <div class="flt sort-cart">
                    <a href="javascript:;" onclick="showSpec(this)">
                        <img src="<?php echo WEBIMG; ?>/addcart_normal.png"/>
                    </a>
                    <div class="pro_detail" style="display: none;">
                        <div class="pro_img">
                            <?php echo $vv['icon_url']; ?>
                        </div>
                        <div class="pro_name">
                            <?php echo $vv['name']; ?>
                        </div>
                        <div class="pro_price">
                            <?php echo $vv['channel_price']; ?>
                        </div>
                        <div class="pro_spec">
                            <?php echo $vv['mass_packing']; ?>
                        </div>
                        <div class="spec_list">
                            <?php foreach ($vv['sku_info'] as $vvv) { ?>
                                <div class="sku_box">
                                    <div class="flt shuxing-adjust">
                                        <p class="product"><?php echo $vvv['attr']; ?></p>
                                    </div>
                                    <div class="flt cart" style="width: 8%;padding-top:5px;">
                                        <label onclick="selectPro(this)"
                                               rel="<?php echo $vvv['product_id'] . '_' . $vvv['id']; ?>"></label>
                                    </div>
                                </div>
                            <?php } ?>
                        </div>
                    </div>
                </div>
            </div>
        <?php } ?>
    </div>

    <form id="searchForm" method="post" name="searchForm">
        <div class="menu-xiala" id="guige_right" style="background:#fff;width: 80%; height:100%;display: block;">
            <div class="select-font padding-adjust4">价格区间</div>
            <div class="sort-input noclick">
                <div style="color: #AFAFAF;background: rgb(239, 239, 239);">
                    <input placeholder="最低价" name="min_price" onkeyup="this.value=this.value.replace(/\D/g,'')"
                           onafterpaste="this.value=this.value.replace(/\D/g,'')" class="sort-form-input"/>
                </div>
                <div class="heng flt" style="padding-right: 4%;padding-top: 8px;">-</div>
                <div style="color: #AFAFAF;background: rgb(239, 239, 239);">
                    <input placeholder="最高价" name="max_price" onkeyup="this.value=this.value.replace(/\D/g,'')"
                           onafterpaste="this.value=this.value.replace(/\D/g,'')"
                           class="sort-form-input"/>
                </div>
            </div>
            <?php if (count($TagsData) > 0) { ?>
                <?php foreach ($TagsData as $item) { ?>
                    <div class="select-font padding-adjust4"><?php echo $item['title']; ?></div>
                    <?php if (count($item['child_tag']) > 0) { ?>
                        <div class="sort-input normal_tag">
                            <?php foreach ($item['child_tag'] as $child) { ?>
                                <div>
                                    <input type="checkbox" name="tags[<?php echo $item['id'];?>][]" value="<?php echo $child['id']; ?>"
                                           style="display: none;">
                                    <?php echo $child['title']; ?>
                                </div>
                            <?php } ?>
                        </div>
                    <?php } ?>
                <?php } ?>
            <?php } ?>
            <div class="sort-bottom" style="background: #fff;">
                <div class="flt" onclick="reset()">
                    <input type="reset" class="sort-form-input" style="font-size: 0.95em;"/>
                </div>
                <div class="flt orangbg" id="subSearch">确定</div>
            </div>

        </div>
    </form>

    <div id="fade_right" class="black_overlay" onclick="CloseDiv2('guige','fade')"></div>

    <?php echo $footer; ?>

</div>

<div id="guige">
    <div class="product-list newproduct" style="padding-bottom: 40px;border: none;">
        <div>
            <img src="" style="width: 70px;" id="pro_img"/>
            <div class="flt pline" style="line-height: 18px;padding-top: 0;">
                <p class="product" id="pro_name"></p>
                <p class="guige" id="pro_spec"></p>
                <p class="price">￥<span id="pro_price"></span></p>
            </div>
        </div>
        <div class="shuxing" id="slectradio" style="overflow: auto;max-height: 78px;">
            <p class="product">属性：</p>
            <div id="spec_list"></div>
        </div>

        <div class="flt pline" style="width: 15%;border: none;">
            <p class="product">数量：</p>
        </div>
        <div class="flt text-right" style="width: 85%;padding-right: 3%;box-sizing: border-box;border: none;">
            <div class="inputNum" style="margin-bottom:5px;">
                <span class="minus minadd" onclick="javascript:num_down(this);return false;">-</span>
                <span class="proNum">
                    <input type="text" name="num" id="pro_num" rel="" value="1" autocomplete="off">
                </span>
                <span class="add minadd" onclick="javascript:num_up(this);return false;">+</span>
            </div>
        </div>
    </div>
    <div class="foot-confirm text-center" onclick="addCart();">确定</div>
    <div class="closeicon" onclick="CloseDiv();">
        <img src="<?php echo WEBIMG; ?>/dialog_close.png" style="width: 22px;"/>
    </div>
</div>
<div id="fade" class="black_overlay" onclick="CloseDiv();"></div>

<div class="search_box" id="search_box">

</div>

<script type="text/javascript" src="<?php echo WEBJS . '/public.js'; ?>"></script>
<script>
    function ShowDiv2() {
        $('#guige_right').animate({"right": "0px"}, 500);
        $('#fade_right').fadeIn("slow");
        $('.four4').removeClass("Cgray").find('img').attr('src', '<?php echo WEBIMG;?>/shaixuan_dianji.png');
        $("body").css({'height': '100%', 'overflow': 'hidden'});
        $("html").css({'overflow': 'hidden', 'width': '100%', "height": "100%", "position": "fixed"});
    }
    function CloseDiv2() {
        $('#guige_right').animate({"right": "-100%"}, 300);
        $('#fade_right').fadeOut("slow");
        $("body,html").css({'overflow': '', 'height': ''});
        $("html").css({'width': '', "position": ""});
    }
    function num_down(el) {
        var num = parseInt($(el).siblings().find('input[name="num"]').val());
        if (num > 1) {
            num = num - 1;
        } else {
            num = 1;
        }
        $(el).siblings().find('input[name="num"]').val(num);
    }
    function num_up(el) {
        var num = parseInt($(el).siblings().find('input[name="num"]').val());
        if (num > 0) {
            num = num + 1;
        } else {
            num = 1;
        }
        $(el).siblings().find('input[name="num"]').val(num);
    }
    function showSpec(el) {
        var pro_img = $(el).siblings('.pro_detail').find('.pro_img').html();
        var pro_name = $(el).siblings('.pro_detail').find('.pro_name').html();
        var pro_price = $(el).siblings('.pro_detail').find('.pro_price').html();
        var pro_spec = $(el).siblings('.pro_detail').find('.pro_spec').html();
        var spec_list = $(el).siblings('.pro_detail').find('.spec_list').html();

        $("#pro_img").attr('src', pro_img);
        $("#pro_name").html(pro_name);
        $("#pro_price").html(pro_price);
        $("#pro_spec").html(pro_spec);
        $("#spec_list").html(spec_list);

        ShowDiv();
    }
    function selectPro(el) {
        var key = $(el).attr('rel');
        $("#pro_num").attr('rel', key);

        $(".sku_box").find('label').removeClass('checked');
        $(el).addClass('checked');
    }
    function addCart() {
        var num = $("#pro_num").val();
        var key = $("#pro_num").attr('rel');
        if (key && num) {
            $.ajax({
                url: '/ajax/product/',
                type: 'post',
                dataType: 'json',
                data: {'ajaxdata': 'addCart', 'id': key, 'num': num},
                success: function (response) {
                    Tip(response.message);
                    CloseDiv();
                },
                beforeSend: function () {
                }
            });
        } else {
            Tip('请选择产品参数');
            return false;
        }
    }
    function mySort(arr) {
        for (var i = 0; i < arr.length; i++) {
            for (var j = 0; j < arr.length - i - 1; j++) {
                if (arr[j] > arr[j + 1]) {
                    arr[j] = arr[j] + arr[j + 1];
                    arr[j + 1] = arr[j] - arr[j + 1];
                    arr[j] = arr[j] - arr[j + 1];
                }
            }
        }
    }
    function sortToptab(type, el) {
        var rel = parseInt($(el).attr('rel'));
        var price_arr = [];
        var sort_arr = [];
        var sale_arr = [];
        $(".product_list>div").each(function () {
            price_arr.push(parseFloat($(this).attr('sort-price')));
            sort_arr.push(parseInt($(this).attr('sort-sort')));
            sale_arr.push(parseInt($(this).attr('sort-sales')));
        });
        var tmp = [];
        var str = '';
        switch (type) {
            case 'composite':
                tmp = sort_arr.sort();
                str = 'sort-sort';
                break;
            case 'price':
                if (rel == 1) {
                    mySort(price_arr);
                    tmp = price_arr;
                } else {
                    mySort(price_arr);
                    tmp = price_arr.reverse();
                }
                str = 'sort-price';
                break;
            case 'sales':
                if (rel == 1) {
                    tmp = sale_arr.sort();
                } else {
                    tmp = sale_arr.reverse();
                }
                str = 'sort-sales';
                break;
        }
        var htmlcode = '';
        for (var i = 0; i < tmp.length; i++) {
            var dom = $(".product_list").find('div[' + str + '=' + tmp[i] + ']');
            htmlcode += dom.prop("outerHTML");
            dom.eq(0).remove();
        }
        $(".product_list").html(htmlcode);
        if (rel == 1) {
            $(el).attr('rel', 0);
            $(el).find('img').attr('src', '<?php echo WEBIMG;?>/paixu_shang.png');
        } else {
            $(el).attr('rel', 1);
            $(el).find('img').attr('src', '<?php echo WEBIMG;?>/paixu_xia.png');
        }
        $(el).siblings().find('.oimg').attr('src', '<?php echo WEBIMG;?>/paixu_moren.png');
    }
    function reset() {
        $(".normal_tag div").each(function () {
            $(this).removeClass('tag_on');
            $(this).find('input').prop('checked', false);
        });
        $("input[name='min_price']").val('');
        $("input[name='max_price']").val('');
    }
    $(function () {
        $(".cate_item").bind('click', function () {
            var cid = $(this).attr('rel');
            $(this).addClass('sortleftfunction white2bg');
            if ($(this).siblings().hasClass('disn')) {
                $(this).siblings().removeClass('disn').find('div').removeClass('sortleftfunction');
            } else {
                $(this).siblings().addClass('disn').find('div').removeClass('sortleftfunction');
            }
            $(this).parent().siblings().find('.cate_item').removeClass('sortleftfunction white2bg').siblings().addClass('disn');

            $(".product_list").find('.border2').hide().end().find('.product_' + cid).show();
        });
        $(".sort-left-erji .div-center").bind('click', function () {
            var cid = $(this).attr('rel');
            $(this).siblings().removeClass('sortleftfunction').end().addClass('sortleftfunction').parent().siblings().removeClass('sortleftfunction');
            $(".product_list").find('.border2').hide().end().find('.product_' + cid).show();
        });
        $(".normal_tag div").bind('click', function () {
            if ($(this).hasClass('tag_on')) {
                $(this).find('input').prop('checked', false);
                $(this).removeClass('tag_on');
            } else {
                $(this).addClass('tag_on');
                $(this).find('input').prop('checked', true);
            }
        });
        $("#subSearch").bind('click', function () {
            var options = {
                url: '<?php echo WEBROOT;?>/product/search',
                type: 'POST',
                dataType: 'JSON',
                success: function (response) {
                    $("#search_box").stop().show().html(response.result).animate({'left': '0px'}, 500);
                    CloseDiv2();
                    return false;
                }
            };
            $("#searchForm").ajaxSubmit(options);
        });
    });
</script>
